<template>
    <div class="header">
        <div class="dateStype">
            <div>{{year}}.{{month}}.{{day}}</div>
            <div>{{dayOfWeek}}</div>
            <div>{{hour}}:{{minutes}}:{{seconds}}</div>
        </div>
        <div class="tianStyle">
            <div>天气晴</div>
            <div>10~20℃</div>
        </div>
      <div class="exitStype">
        <img style="width: 100px;" src="../../assets/images/exit.png" v-if="isLogout" @click="logout()" >
        <img style="" src="../../assets/images/close.png" v-else @click="goBack" >
      </div>
      <div class="backStype" v-if="isBack" @click="goBack">
        <img style="width: 50px;" src="../../assets/images/back.png">
      </div>

    </div>
</template>

<script>
import { removeToken } from '@/utils/auth'
    export default {
      name: "headerView",
      props: {
        isBack: {
          type: Boolean,
          default: false
        },
        isLogout: {
          type: Boolean,
          default: true
        },
      },
      data() {
          return {
              year: '',
              month: '',
              day: '',
              hour: '',
              minutes:'',
              seconds:'',
              dayOfWeek: '',
          };
        },
        mounted() {
            setInterval(()=>{
                this.getCurrentTime()
            },1000);
        },
        created() {

        },
        methods: {
          goBack(){
            this.$router.back();
          },
          logout(){
            this.$confirm('确定注销并退出系统吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              removeToken();
              this.$router.push("/login");
            }).catch(() => {});

          },
            getTwoTime(time){
                return time<10?('0'+time):time;
            },
            getCurrentTime(){
                // 获得年月日
                let date = new Date();
                this.year = date.getFullYear();
                this.month = this.getTwoTime(date.getMonth()+1);
                this.day = this.getTwoTime(date.getDate());
                this.hour = this.getTwoTime(date.getHours());
                this.minutes = this.getTwoTime(date.getMinutes());
                this.seconds = this.getTwoTime(date.getSeconds());
                this.dayOfWeek = this.getDayOfWeek(date)
            },
            getDayOfWeek(date) {
                const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
                // return days[date.getDay()];
                return days[date.getDay()];
            },
        },
    }
</script>

<style lang="scss" scoped>
    .exitStype{
      position: fixed;top:8vh;right: 50px;cursor: pointer;
    }
    .backStype{
      position: fixed;top:8vh;left: 50px;cursor: pointer;
    }
    .header{
        background: url("../../assets/images/index-top.png") repeat-x;
        background-size: 100% 100%;
        width: 100%;
        height: 11vh;
        display: flex;
        justify-content: space-around;

        .dateStype{
            font-size: 0.14rem;
            color: #11A2F0;
            font-weight: bold;
            width: 50%;
            display: flex;
            align-items: center;
            height: 50%;
            margin-top: 5px;
        }

        .dateStype div:first-child{
            margin-left:0.3rem;
        }
        .dateStype div{
            margin-right: 0.28rem;
        }
        .tianStyle{
            font-size: 0.14rem;
            color: #11A2F0;
            font-weight: bold;
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: right;
            height: 50%;
            padding-right: 0.28rem;
            margin-top: 5px;
        }
        .tianStyle div{
            margin-right: 0.14rem;
        }
    }
</style>
